---
import TableOfContentsList from './TableOfContentsList.astro';
import type { Props } from '@astrojs/starlight/props';

const { toc, slug } = Astro.props;
---

{
  toc && (
    <starlight-toc
      data-min-h={toc.minHeadingLevel}
      data-max-h={toc.maxHeadingLevel}
    >
      <nav aria-labelledby="starlight__on-this-page">
        <h2 id="starlight__on-this-page">
          {Astro.locals.t('tableOfContents.onThisPage')}
        </h2>
        <TableOfContentsList toc={toc.items} basePath={slug} />
      </nav>
    </starlight-toc>
  )
}

<script src="./starlight-toc.ts"></script>
